<template>
  <!-- Select -->
  <template v-if="config[0].type === 'Select'">
    <t-select
      v-bind="getAllProps(config[0])"
      v-model="config[0].props.value"
      :style="getWrapperStyle(config[0])"
    />
  </template>

  <!-- CheckboxGroup -->
  <template v-else-if="config[0].type === 'CheckboxGroup'">
    <t-checkbox-group
      v-bind="getAllProps(config[0])"
      v-model="config[0].props.value"
      :style="getWrapperStyle(config[0])"
    >
      <t-checkbox
        v-for="(opt, index) in config[0].props.options"
        :key="opt.value || index"
        :value="opt.value"
      >
        {{ opt.label }}
      </t-checkbox>
    </t-checkbox-group>
  </template>

  <!-- NavMenu -->
  <template v-else-if="config[0].type === 'NavMenu'">
    <t-head-menu
      v-bind="getAllProps(config[0])"
      v-model="config[0].props.value"
      :style="getWrapperStyle(config[0])"
    >
      <t-menu-item
        v-for="(item, index) in config[0].props.options"
        :key="item.value || index"
        :value="item.value"
      >
        {{ item.label }}
      </t-menu-item>
    </t-head-menu>
  </template>

  <!-- Tabs -->
  <template v-else-if="config[0].type === 'Tabs'">
    <t-tabs
      v-bind="getAllProps(config[0])"
      v-model="config[0].props.value"
      :style="getWrapperStyle(config[0])"
    >
      <t-tab-panel
        v-for="(tab, index) in config[0].slots?.default || []"
        :key="tab.props.value || index"
        v-bind="tab.props"
      >
        {{ tab.props.label }}
      </t-tab-panel>
    </t-tabs>
  </template>

  <!-- 通用组件 -->
  <component
    v-else
    :is="getComponent(config[0].type)"
    v-bind="getAllProps(config[0])"
    :style="getWrapperStyle(config[0])"
    v-model="config[0].props.value"
  >
    <!-- 插槽渲染 -->
    <template
      v-for="(slotContent, slotName) in renderSlots(config[0])"
      v-slot:[slotName]
    >
      <component
        v-for="(child, index) in slotContent"
        :key="index"
        :is="child.component"
        v-bind="child.props"
      >
        {{ child.text || '' }}
      </component>
    </template>
  </component>
</template>

<script setup>
import { componentMap } from './component-map'

const props = defineProps({
  config: { type: Array, required: true }
})

/** 获取组件 */
const getComponent = (type) =>
  componentMap[type]?.component || 'div'

/** 合并 props */
const getAllProps = (item) => {
  const defaultProps = componentMap[item.type]?.defaultProps || {}
  return {
    ...defaultProps,
    ...(item.props || {})
  }
}

/** 样式 */
const getWrapperStyle = (item) => {
  const style = item.style || {}
  const result = {
    width: style.width + 'px',
    height: style.height + 'px',
    pointerEvents: 'auto'
  }
  if (style.fontSize) {
    result.fontSize = style.fontSize + 'px'
  }
  return result
}

/** 插槽 */
const renderSlots = (item) => {
  const result = {}

  if (item.type === 'Button' && item.props.content) {
    result.default = [{ component: 'span', text: item.props.content }]
  }

  if (item.type === 'Card') {
    result.default = [{ component: 'div', text: item.props.description || '' }]
  }

  return result
}
</script>

<style>
.t-input {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
</style>
